import React, { Component } from "react";
import { Form, Input, Button, Row, Col, Table, Divider, Modal } from "antd";
import Content from "../../components/Content";

const { Item } = Form;

class StrainInForm extends Component {
  constructor(props) {
    super(props);
  }

  state = {
    dataSource: [],
    selectedRowKeys: [], // Check here to configure the default column
    loading: false,

    keyword:'',

    showAcqId: '',
    showView: false,
    viewData: {},
    
    count: 0,
    loading: true,
    pageNum: 1,
    pageSize: 100
  };

  showModal = (record) => {
    const url = global.api.acquisitionByAcqId;
    return global.getdata.get(url, {Acq_id: record.Acq_id})
    .then(res => {
      this.setState({
        showAcqId: record.Acq_id,
        showView: true,
        viewData: res[0]
      });
    })
    .catch(err => {
      Modal.error({
        content: '加载数据出错！'
      });
    })     
  }

  loadData = (current) => {

    this.setState({ loading: true });
    // ajax request after empty completing
    setTimeout(() => {
      this.setState({
        selectedRowKeys: [],
        loading: false
      });
    }, 1000);

    if( !current ) current = 1;
    console.info(this.state.keyword)

    const url = global.api.acquisitionSearch;
    return global.getdata.get(url, {page_index: current, page_size: this.state.pageSize, search: this.state.keyword})
    .then(res => {
      this.setState({dataSource: res.results, count: res.count, loading: false})
    })
    .catch(err => {
      Modal.error({
        content: '加载数据出错！'
      });
    }) 

  }

  componentDidMount() {
    this.loadData(1);
  }

  onShowSizeChange = (current, pageSize) => {
    this.loadData(1);
    this.setState({
        pageSize: pageSize
    })
  }

  paginationProps = {
    showSizeChanger: true,//设置每页显示数据条数
    showQuickJumper: false,
    showTotal: () => `共${this.state.count}条`,
    pageSize: this.state.pageSize,
    total: this.state.count,  //数据的总的条数
    onChange: (current) => this.loadData(current), //点击当前页码
    onShowSizeChange: (current, pageSize) => {//设置每页显示数据条数，current表示当前页码，pageSize表示每页展示数据条数
        console.log(pageSize);
        this.onShowSizeChange(current, pageSize)
    }
  }

  onSubmit = evt => {
    evt.preventDefault();
    const { onSubmit } = this.props;
    onSubmit && onSubmit();
  };
  start = () => {
    this.setState({ loading: true });
    // ajax request after empty completing
    setTimeout(() => {
      this.setState({
        selectedRowKeys: [],
        loading: false
      });
    }, 1000);
  };

  onSelectChange = selectedRowKeys => {
    console.log("selectedRowKeys changed: ", selectedRowKeys);
    this.setState({ selectedRowKeys });
  };
  render() {
    const { getFieldDecorator } = this.props.form;
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 4 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 8 }
      }
    };
    const { loading, selectedRowKeys } = this.state;
    const rowSelection = {
      selectedRowKeys,
      onChange: this.onSelectChange
    };
    const formItemLayoutt = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 12 }
      }
    };

    const columns = [
      {
        title: "序号",
        key: "1",
        dataIndex: "id",
        className: "generic_name"
      },
      {
        title: "采集样品名",
        dataIndex: "name",
        className: "generic_name"
      },
      {
        title: "采集样品编号",
        dataIndex: "Acq_id",
        className: "generic_name"
      },
      {
        title: "采集地点",
        dataIndex: "r_cjdd",
        className: "generic_name"
      },
      {
        title: "采集时间",
        dataIndex: "q_time",
        className: "generic_name"
      },
      {
        title: "采集人员",
        dataIndex: "q_person",
        className: "generic_name"
      },
      {
        title: "操作",
        className: "operate",
        dataIndex: "",
        render: (text, record) => (
            <Button type="dashed" onClick={() => this.showModal(record)}>
              查看
            </Button>
        )
      }
    ];
  

    const hasSelected = selectedRowKeys.length > 0;
    return (
      <div>
        <div className="filtrate">
          <p style={{marginLeft:'100px'}}>
          <span className="span">
            <Input onChange={e => this.state.keyword = e.target.value } placeholder="输入查询内容" style={{ width: 500 }} />
          </span>
          <span className="span" >
            <Button loading={this.state.loading} type="primary" style={{ width: 80 }} onClick={()=>this.loadData(1)}>
              查询
            </Button>
          </span>
          </p>
        </div>
        <Table
          rowSelection={rowSelection}
          columns={columns}
          dataSource={this.state.dataSource}
          pagination={this.paginationProps}
          bordered
          style={{ marginLeft: 12 ,marginTop:50}}
        />

        <Modal
            title="查看"
            centered
            visible={this.state.showView}
            onOk={() => this.setState({showView: false})}
            onCancel={() => this.setState({showView: false})}
            maskClosable={false}
          >
            <Form {...formItemLayoutt} onSubmit={this.onSubmit} colon={false}>
              <div style={{ display: "flex" }}>
                <span style={{ flex: 1 }}>
                  <Item label="任务编号">
                      <Input value={this.state.viewData.id } />
                  </Item>
                  <Item label="采集样品名">
                      <Input value={this.state.viewData.name } />
                  </Item>
                  <Item label="样品编号">
                      <Input value={this.state.viewData.Acq_id } />
                  </Item>
                  <Item label="样品类型">
                      <Input value={this.state.viewData.Acq_type  } />
                  </Item>
                  <Item label="采集所在国家">
                      <Input value={this.state.viewData.in_country } />
                  </Item>
                  <Item label="	采集所在地区">
                      <Input value={this.state.viewData.r_cjdq } />
                  </Item>
                  <Item label="采集所在地点">
                      <Input value={this.state.viewData.r_cjdd } />
                  </Item>
                  <Item label="采集点经度">
                      <Input value={this.state.viewData.add_longitude  } />
                  </Item>
                  <Item label="采集点纬度">
                      <Input value={this.state.viewData.add_latitude  } />
                  </Item>
                  <Item label="采集点海拔高度">
                      <Input value={this.state.viewData.add_height   } />
                  </Item>
                  <Item label="气候特征">
                      <Input value={this.state.viewData.in_climate  } />
                  </Item>
                  <Item label="天气特征">
                      <Input value={this.state.viewData.in_weather  } />
                  </Item>
                  <Item label="	采集时间">
                      <Input value={this.state.viewData.q_time  } />
                  </Item>
                  <Item label="	采集人员姓名职务">
                      <Input value={this.state.viewData.q_person  } />
                  </Item>
                </span>
                <span style={{ flex: 1 }}>
                  <Item label="联系情况">
                      <Input value={this.state.viewData.in_affiliation } />
                  </Item>
                  <Item label="存放位置">
                      <Input value={this.state.viewData.store_place } />
                  </Item>
                  <Item label="存放数量">
                      <Input value={this.state.viewData.store_num } />
                  </Item>
                  <Item label="	最初存入时间">
                      <Input value={this.state.viewData.store_date } />
                  </Item>
                  <Item label="备注信息">
                      <Input value={this.state.viewData.remark } />
                  </Item>
                  <Item label="入库人员姓名">
                      <Input value={this.state.viewData.worker } />
                  </Item>
                  <Item label="生境类型">
                      <Input value={this.state.viewData.habitattype } />
                  </Item>
                  <Item label="图片">
                      <Input value={this.state.viewData.habitatimage  } />
                  </Item>
                </span>
              </div>
            </Form>
          </Modal>        

      </div>
    );
  }
}
const WrapperedStrainInForm = Form.create({
  name: "in strain"
})(StrainInForm);

class AcquisitionQuery extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  onSubmit = () => {
    const { form } = this.form.props;
    form.validateFields((errs, values) => {
      console.log(errs, values);
    });
  };
  render() {
    return (
      <Content>
        <WrapperedStrainInForm
          wrappedComponentRef={ref => (this.form = ref)}
          onSubmit={this.onSubmit}
        />
      </Content>
    );
  }
}

export default AcquisitionQuery;
